import Taro, { Component } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import { AtFloatLayout } from 'taro-ui'
import SkuFloatLayout from './sku-float-layout'
import './index.scss'

export default class Sku extends Taro.Component {
    static defaultProps = {
        selectedProp: [],
        prodNum: 1,
        list: [],
        defaultSku: [],
        price: ''
    }
    state = {
        loaded: false,
        loading: false,
        isFloatLayoutOpened: false
    }
    showSku() {
        const { isFloatLayoutOpened } = this.state.isFloatLayoutOpened
        this.setState({
            isFloatLayoutOpened: isFloatLayoutOpened ? false : true
        })
    }

    closeSku = (isFloatLayoutOpened) => {
        this.setState({
            isFloatLayoutOpened: isFloatLayoutOpened
        })
    }

    //判断数组是否包含某对象
    array_contain = (array, obj) => {
        var result = true;

        (array || []).forEach(item => {
            if (item == obj) {//如果要求数据类型也一致，这里可使用恒等号===
                result = false
            }
        })

        return result
    }
    groupSkuProp(skuList, defaultSku, price) {
        var skuGroup = {}
        var allProperties = []
        var propKeys = []
        var selectedPropObj = {}
        skuList.map(item => {
            var isDefault = false
            // console.log(defaultSku && item.price == price,item.price == price,item.price,price)
            if (defaultSku && item.price == price) { //找到和商品价格一样的那个SKU，作为默认选中的SKU
                isDefault = true
            }
            var properties = item.properties//版本:公开版;颜色:金色;内存:64GB
            allProperties.push(properties)
            var propList = properties.split(";") // ["版本:公开版","颜色:金色","内存:64GB"]

            propList.map((item, j) => {
                var propval = item.split(":") //["版本","公开版"]
                var key = propval[0]
                var value = propval[1]
                var props = skuGroup[key] //先取出 版本对应的值数组
                //如果当前是默认选中的sku，把对应的属性值 组装到selectedProp
                if (isDefault) {
                    propKeys.push(key)
                    selectedPropObj[key] = value
                }
                if (props == undefined) {
                    props = [] //假设还没有版本，新建个新的空数组
                    props.push(value) //把 "公开版" 放进空数组
                } else {
                    if (this.array_contain(props, value)) { //如果数组里面没有"公开版"
                        props.push(value)//把 "公开版" 放进数组
                    }
                }
                skuGroup[key] = props //最后把数据 放回版本对应的值
            })
        })
        this.propKeys = propKeys
        this.parseSelectedObjToVals(skuList, selectedPropObj);
        this.skuGroup = skuGroup
        this.allProperties = allProperties
    }
    //将已选的 {key:val,key2:val2}转换成 [val,val2]
    parseSelectedObjToVals(skuList, selectedPropObj) {
        var selectedProperties = ""
        var selectedProp = []

        Object.keys(selectedPropObj).forEach(k => {
            selectedProp.push(selectedPropObj[k])
            selectedProperties += k + ":" + selectedPropObj[k] + ";"
        })

        selectedProperties = selectedProperties.substring(0, selectedProperties.length - 1);

        this.selectedProp = selectedProp

        skuList.map((item, index) => {
            if (item.properties == selectedProperties) {
                this.defaultSku = item
                return
            }
        })
    }
    render() {
        const { list, prodNum, pic, defaultSku, price } = this.props
        this.groupSkuProp(list, defaultSku, price)
        return (
            <View>
                <View className="sku">
                    <View className="sku-tit">已选</View>
                    <View className="sku-con">{this.selectedProp.length > 0 ? this.selectedProp + '，' : this.selectedProp}{prodNum}件</View>
                    <View className="more" onClick={() => this.showSku()}>...</View>

                    <AtFloatLayout
                        isOpened={this.state.isFloatLayoutOpened}
                        scrollY
                    >
                        <SkuFloatLayout defaultSku={defaultSku} pic={pic} selectedProp={this.selectedProp} prodNum={prodNum} skuGroup={this.skuGroup} onClick={this.closeSku} />
                    </AtFloatLayout>

                </View>
            </View>


        )
    }
}